<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.shell{
				width: 100vw;
				column-count: 5;/* 定义一行显示几列 */
				column-gap: 15px;/* 定义每一列之间的间隙 */
			}
			.imgitem{
				margin-bottom: 15px;/* 定义每一行之间的间隙 */
			}
			.imgitem>img{
				width: 100%;
			}
			/* 利用媒体查询定义在不同屏幕下显示的列数 */
			@media (max-width:1200px){
				.shell{
					column-count: 4;
				}
			}
			@media (max-width:850px){
				.shell{
					column-count: 3;
				}
			}
			@media (max-width:600px){
				.shell{
					column-count: 2;
				}
			}
			.bottomtitle{
				width: 100%;
				height: 20vh;
				background-color: #00FF00;
				color: white;
				text-align: center;
				line-height: 20vh;
			}
		</style>
		
	</head>
	<body>
		<div class="shell">
			<div class="imgitem">
				<img src="img/1.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="img/1.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="img/1.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="./主页demo/img/cat.jpg"/>
			</div>
			<div class="imgitem">
				<img src="img/1.jpg"/>
			</div>

		</div>
		<div class="bottomtitle">
			到底了
		</div>
	</body>
</html>
